<template>
  <div class="gpm-main">
    <div class="gpm-top">
      <div class="gpm-top-head">
        <div class="gpm-top-info">
          <h4>团队业务详情</h4>
          <span>返回列表</span>
        </div>
        <div class="gpm-top-tiem">
          <span>创建时间：2023-01-30 10:21:12</span>
        </div>
      </div>
      <div class="gpm-top-main">
        <div class="gpm-box">
          <div class="gpm-base">
            <div class="gpm-order">业务编号：JH895642123</div>
            <div class="gpm-time">
              <i></i>
              <span>18时14分20秒</span>
            </div>
          </div>
          <div class="gpm-show">
            <div class="gpm-left">
              <div class="gpm-title">
                <span class="gpm-tag">销售</span>
                <h4>测试团购业务100吨</h4>
              </div>
              <div class="gpm-list">
                <div class="gpm-item">
                  <span>品种：鸡蛋</span>
                </div>
                <div class="gpm-item"><span>年份：2023</span></div>
                <div class="gpm-item"><span>产地：福建</span></div>
                <div class="gpm-item">
                  <span> 品质属性：</span>
                  <a href="javascript:;"> 点击查看</a>
                </div>
              </div>
            </div>
            <div class="gpm-right">
              <div class="gpm-item">
                <div class="gpm-label">状态</div>
                <div class="gpm-desc">待买方加入</div>
              </div>
              <div class="gpm-item">
                <div class="gpm-label">当前进度</div>
                <div class="gpm-progress">
                  <el-progress
                    :percentage="30"
                    :show-text="false"
                    color="#009E3F"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gpm-transaction">
        <div class="hd">
          <div class="gpm-btn on">基本信息</div>
          <div class="gpm-btn">参与信息</div>
        </div>
        <div class="bd">
          <div class="gpm-transaction-box">
            <div class="gpm-transaction-list">
              <div class="gpm-transaction-title">交易信息</div>
              <el-row>
                <el-col :span="8">
                  <div class="gpm-transaction-item">
                    <span class="label"> 数量： </span>
                    <span class="value"> 1,000.00吨 </span>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="gpm-transaction-item">
                    <span class="label"> 单价（含税）： </span>
                    <span class="value"> 1,000.00元/吨</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="gpm-transaction-item">
                    <span class="label"> 交易类型： </span>
                    <span class="value">集中采购</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="gpm-transaction-item">
                    <span class="label"> 交易合同 </span>
                    <span class="value"> 数蛋联官方店与X企业合同</span>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="gpm-transaction-item">
                    <span class="label"> 交易地点： </span>
                    <span class="value"> 福州</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="gpm-transaction-list">
              <div class="gpm-transaction-title">验收信息</div>
              <el-row>
                <el-col :span="8">
                  <div class="gpm-transaction-item">
                    <span class="label"> 验收日期： </span>
                    <span class="value">2023-02-01 </span>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="gpm-transaction-item">
                    <span class="label"> 质量验收方式： </span>
                    <span class="value"> 第三方检验(第三方检验资质)</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="gpm-transaction-item">
                    <span class="label"> 数量验收方式： </span>
                    <span class="value">现场全检</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="gpm-transaction-item">
                    <span class="label"> 指定验收地点： </span>
                    <span class="value"> 数蛋联官方店 </span>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="gpm-transaction-item">
                    <span class="label"> 增值税发票类型： </span>
                    <span class="value">
                      乙方应在双方约定的最后提货日15日内向甲方开具增值税专用发票</span
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gpm-bottom">
      <div class="gpm-bottom-title">交易列表</div>
      <el-table style="width: 100%" height="330px">
        <template slot="empty">
          <img src="../../../assets/empty.png" alt="" />
          <p style="color: #aaaaaa; font-size: 18px; margin-top: -34px">
            暂无交易信息
          </p>
        </template>
        <el-table-column prop="date" label="批次"> </el-table-column>
        <el-table-column label="交易识别号"> </el-table-column>
        <el-table-column prop="name" label="交易类型"> </el-table-column>
        <el-table-column label="货物数量(吨)"> </el-table-column>
        <el-table-column prop="province" label="操作时间"> </el-table-column>
        <el-table-column prop="city" label="状态"> </el-table-column>
        <el-table-column prop="address" label="操作"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.gpm-main {
  font-size: 14px;
  .gpm-top {
    width: 100%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    padding: 0 20px 10px;
    .gpm-top-head {
      width: 100%;
      height: 67px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(227, 227, 227, 1);
      .gpm-top-info {
        display: flex;
        align-items: center;
        h4 {
          font-size: 18px;
          color: rgba(51, 51, 51, 1);
        }
        span {
          color: rgba(0, 158, 63, 1);
          margin-left: 10px;
        }
      }
      .gpm-top-tiem span {
        color: rgba(170, 170, 170, 1);
      }
    }
    .gpm-top-main {
      padding-bottom: 20px;
      border-bottom: 1px dashed #e3e3e3;
      .gpm-base {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        .gpm-order {
          color: rgba(56, 56, 56, 1);
        }
        .gpm-time {
          color: rgba(255, 141, 26, 1);
        }
      }
      .gpm-show {
        display: flex;
        justify-content: space-between;
        margin-top: 17px;
        height: 70px;
        .gpm-left {
          .gpm-title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .gpm-tag {
              width: 52px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              border-radius: 5px;
              color: rgba(0, 158, 63, 1);
              background: rgba(242, 250, 245, 1);
            }
            h4 {
              font-size: 18px;
              font-weight: 700;
              color: rgba(51, 51, 51, 1);
              margin-left: 10px;
              line-height: 40px;
            }
          }
          .gpm-list {
            display: flex;
            align-items: center;
            .gpm-item {
              display: flex;
              align-items: center;
              margin-right: 40px;
              span {
                color: rgba(102, 102, 102, 1);
              }
              a {
                color: rgba(0, 158, 63, 1);
              }
            }
          }
        }
        .gpm-right {
          width: 270px;
          display: flex;
          align-items: center;
          .gpm-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            .gpm-label {
              color: rgba(102, 102, 102, 1);
              line-height: 40px;
            }
            .gpm-desc {
              font-weight: 700;
              color: rgba(51, 51, 51, 1);
              line-height: 22px;
              margin-right: 40px;
            }
            .gpm-progress {
              width: 147px;
              height: 14px;
            }
          }
        }
      }
    }
    .gpm-transaction {
      padding-top: 20px;
      .hd {
        display: flex;
        align-items: center;
        .gpm-btn {
          width: 88px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 32px;
          &.on {
            background: #f2f3f8;
            color: #009e3f;
          }
        }
      }
      .bd {
        .gpm-transaction-list {
          margin-bottom: 10px;
        }
        padding-top: 32px;
        .gpm-transaction-title {
          font-size: 16px;
          font-weight: 400;
          line-height: 40px;
          color: rgba(51, 51, 51, 1);
        }
        .gpm-transaction-item {
          display: flex;
          line-height: 36px;
          .label {
            color: #666666;
          }
          .value {
            color: #999999;
          }
        }
      }
    }
  }
  .gpm-bottom {
    width: 100%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    padding: 36px 20px 0;
    margin-top: 10px;
    .gpm-bottom-title {
      font-size: 18px;
      font-weight: 400;
      line-height: 40px;
      color: rgba(51, 51, 51, 1);
      padding-left: 13px;
      position: relative;
      &::before {
        content: "";
        width: 3px;
        height: 20px;
        background: #009e3f;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
}
</style>

